import { Input, Button, List } from 'antd'
import React, { Component } from 'react';

/**
 * 有状态组件
 */
class ToduListUi extends Component {

    render() { 
        return ( 
            <div style={{paddingTop:'10%'}}>
                <div className="example-input">
                    <Input size="large" value={this.props.inputValue} placeholder={this.props.inputValue} onChange={this.props.changeInputValue}/>
                    <Button size="large" type="primary" onClick={this.props.addItem}>增加</Button>
                </div>
                <div className="list">
                    <List
                        bordered
                        dataSource={this.props.list}
                        renderItem={(item,index) => (
                            <List.Item onClick={()=>{this.props.delItem(index)}}>{item}</List.Item>
                        )}
                    />
                </div>
            </div>
         );
    }
}
 
export default ToduListUi;